{% extends 'custom_base_site.html' %}
{% block chart %}
    <script src="/static/vue/vue.js"></script>

    <link rel="stylesheet" href="/static/vue-element/vue-element.css">
    <script src="/static/vue-element/vue-element.js"></script>

    <script src="/static/highcharts/highcharts.js"></script>
    <script src="/static/highcharts/highcharts-more.js"></script>
    <script src="/static/highcharts/modules/exporting.js"></script>
    <script src="/static/highcharts/modules/export-data.js"></script>
    <script src="/static/highcharts/modules/oldie.js"></script>

    <script src="/static/moment/moment.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
    <script src="/static/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

    <link rel="stylesheet" href="/static/bootstrap-select/css/bootstrap-select.min.css">
    <script src="/static/bootstrap-select/js/bootstrap-select.min.js"></script>

    <script src="/static/html-util.js"></script>
    <script src="/static/string-format.js"></script>

    <!-- chart -->
    <div id="container" style="min-width:400px;height:400px"></div>
    <!-- chart end -->
    <div class="form-inline">
        <!-- store selector -->
        <select id="store-selector" class="selectpicker" data-width="fit">
            {% for store in stores %}
                <option data-tokens="{{ store.id | safe }}"
                        value="{{ store.id | safe }}">{{ store.title | safe }}</option>
            {% endfor %}
        </select>
        <script>
            // init set
            let store = "{{ store_selector_init.id | safe }}";  // amount interests
            $storeSelector = $("#store-selector");
            $storeSelector.selectpicker('val', store);
        </script>
        <!-- store selector end -->

        <!-- date picker -->
        <div class='input-group date' id='datetimepicker-start'>
            <input type='text' class="form-control"/>
            <span class="input-group-addon"><span
                    class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <div class='input-group date' id='datetimepicker-end'>
            <input type='text' class="form-control"/>
            <span class="input-group-addon"><span
                    class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <!-- date picker end -->

        <!--- form-group input-group -->
    </div>
    <script type="text/javascript">
        $(function () {
        });
        let start = moment().startOf('year'),
            end = moment();
        // moment(new Date()) moment().toDate()
        $dp_start = $('#datetimepicker-start');
        $dp_end = $('#datetimepicker-end');
        $dp_start.datetimepicker({
            format: 'YYYY-MM-DD',
            showTodayButton: true,
            defaultDate: start,
        });
        $dp_end.datetimepicker({
            format: 'YYYY-MM-DD',
            showTodayButton: true,
            defaultDate: end,
        });
        $dp_start.on("dp.change", function (event) {
            // event.date instanceof moment === true
            $dp_end.data("DateTimePicker").minDate(event.date);
        });
        $dp_end.on("dp.change", function (event) {
            // event.date instanceof moment === true
            $dp_start.data("DateTimePicker").maxDate(event.date);
        });


        let scheme = "",
            domain = "",
            base_url = "{scheme}{domain}".format({"scheme": scheme, "domain": domain}),
            bath_path = "/api-analysis/performance",
            para_path = "/store/{store}/from/{start}/to/{end}".format({
                "store": store,
                "start": start.format("YYYY-MM-DD"),
                "end": end.format("YYYY-MM-DD")
            }),
            url = "{0}{1}{2}".format(base_url, bath_path, para_path);
        // scheme domain path     `https://`  `www.redfoxatasleep.com`  `/base/path`  `/para/path`  `?key=stringValue`


        let chart, chartOptions, min, max, response;
        $.get(url, function (data, status) {
            response = data;
            min = new Date(response["min"]);
            max = new Date(response["max"]);
            $dp_start.data("DateTimePicker").minDate(min);
            $dp_end.data("DateTimePicker").maxDate(max);

            chart = Highcharts.chart('container', response["options"]);
        });


        $dp_start.on("dp.change", function (event) {
            // event.date instanceof moment === true
            start = event.date;
            para_path = "/store/{store}/from/{start}/to/{end}".format({
                "store": store,
                "start": start.format("YYYY-MM-DD"),
                "end": end.format("YYYY-MM-DD")
            });
            url = "{0}{1}{2}".format(base_url, bath_path, para_path);
            $.get(url, function (data, status) {
                // data: response from server
                chart.update(data["options"]);
            });
        });
        $dp_end.on("dp.change", function (event) {
            // event.date instanceof moment === true
            end = event.date;
            para_path = "/store/{store}/from/{start}/to/{end}".format({
                "store": store,
                "start": start.format("YYYY-MM-DD"),
                "end": end.format("YYYY-MM-DD")
            });
            url = "{0}{1}{2}".format(base_url, bath_path, para_path);
            $.get(url, function (data, status) {
                // data: response from server
                chart.update(data["options"]);
            });
        });
        $storeSelector.on(
            'changed.bs.select',
            function (e, clickedIndex, isSelected, previousValue) {
                let selectedOption = event.target[clickedIndex];
                store = selectedOption.value;
                // event.date instanceof moment === true
                para_path = "/store/{store}/from/{start}/to/{end}".format({
                    "store": store,
                    "start": start.format("YYYY-MM-DD"),
                    "end": end.format("YYYY-MM-DD")
                });
                url = "{0}{1}{2}".format(base_url, bath_path, para_path);
                $.get(url, function (data, status) {
                    // data: response from server
                    chart.update(data["options"]);
                });

            }
        );
    </script>


{% endblock %}